<style>
    div {
        width: 800px;
        height: 40px;
        border: solid 1px black;
        margin: 30px auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

<div class="page1"></div>
<div class="page2"></div>

<script>
    // 留心：形参默认值作用
    // 明确：后期肯定要在原型函数中使用 this.options.pageTag
    // 发现：如果万一用户不传递第二个实参  然后你又没有设置默认值
    // 瑕疵：代码直接报错
    // 举例：let obj1 = {}   obj1.a     undefined
    // 举例：let obj2        obj2.a     报错

    // 定义结构
    function Page(el, options = {}) {
        // 公共属性
        this.el = document.querySelector(el)
        this.options = options
        

        // 启动
        this.init()
        
    }

    // 启动
    Page.prototype.init = function () {
        // 动作
        // 设置默认值
        // 创建分页标签
        this.createTag()
        // 创建分页页码（推荐 写在 创建分页标签 中 语义化  现有 创建分页标签 才能有 分页页码
        // ...
        this.createEvent()
    }

    Page.prototype.createEvent = function () {
        // 1 获取当前盒子
        this.el.onclick = (evt) => {
            let e = evt || window.event
            let target = e.target || e.srcElement
            if (target.nodeName ==='P'){
                switch (target.innerText) {
                    case this.options.pageTag.first:
                        this.options.pageInfo.pageNum = 1
                        break;
                    case this.options.pageTag.last:
                        this.options.pageInfo.pageNum = this.options.pageInfo.totalPage
                        break;
                    case this.options.pageTag.prev:
                        if(this.options.pageInfo.pageNum == 1)  return
                        this.options.pageInfo.pageNum--
                        break;
                    case this.options.pageTag.next:
                    if(this.options.pageInfo.pageNum == this.options.pageInfo.totalPage) return
                    this.options.pageInfo.pageNum++
                    break;

                
                    default:
                        if(parseInt(target.innerHTML)>0){
                            this.options.pageInfo.pageNum = parseInt(target.innerHTML)
                        }
                        break;
                }
                this.createTag()
            }
        }
        // 2 绑定点击事件
        // 3 事件处理函数中
        // 3.1 获取事件对象
        // 3.2 获取操作的标签  判断
        // 3.3 更新当前页、并且得重新创建分页标签和页码
    }

    // 分页标签
    Page.prototype.createTag = function () {
        //清空盒子里的数据
        this.el.innerHTML = ''
        let pageTag = this.options.pageTag
        for(let key in pageTag){
            this.repeat(pageTag[key],this.el)
        }
        
        this.createInfo()
    }
    //页码标签
    Page.prototype.createInfo  = function () {
        let p3Obj = this.el.querySelector('p:nth-of-type(3)')
        p3Obj.style.border = 'none'
        // for(let i =1;i<10;i++) {
        //  this.repeat(i,p3Obj)
        // }
        let pageNum = this.options.pageInfo.pageNum
        this.options.pageInfo.totalPage = Math.ceil(this.options.pageInfo.totalData/this.options.pageInfo.pageSize)
        let totalPage=this.options.pageInfo.totalPage
        if (totalPage < 7) {
            for (let i = 1; i <= totalPage; i++) this.createP(i, p3Obj)
        } else if (pageNum < 5) {
            for (let i = 1; i <= 5; i++) this.repeat( i, p3Obj)
            this.repeat( '...', p3Obj)
            this.repeat(totalPage - 1, p3Obj)
            this.repeat( totalPage, p3Obj)
        } else if (pageNum == 5) {
            for (let i = 1; i <= 7; i++) this.repeat( i, p3Obj)
            this.repeat( '...', p3Obj)
            this.repeat( totalPage - 1, p3Obj)
            this.repeat( totalPage, p3Obj)
        } else if (pageNum > 5 && pageNum < totalPage - 4) {
            for (let i = 1; i <= 2; i++) this.repeat( i, p3Obj)
            this.repeat( '...', p3Obj)
            this.repeat( pageNum - 2, p3Obj)
            this.repeat( pageNum - 1, p3Obj)
            this.repeat( pageNum, p3Obj)
            this.repeat( pageNum + 1, p3Obj)
            this.repeat( pageNum + 2, p3Obj)
            this.repeat( '...', p3Obj)
            this.repeat( totalPage - 1, p3Obj)
            this.repeat( totalPage, p3Obj)
        } else if (pageNum >= totalPage - 4) {
            for (let i = 1; i <= 2; i++) this.repeat( i, p3Obj)
            this.repeat( '...', p3Obj)
            for (let i = totalPage - 4; i <= totalPage; i++) this.repeat( i, p3Obj)
        }
    }

    //重复代码封装
    Page.prototype.repeat = function (content,father) {
        let pObj = document.createElement('p')
            pObj.style.border = '1px solid black'
            pObj.style.margin = '0px 5px'
            pObj.style.padding = '0px 5px'
            pObj.style.display = 'inline-block'
            pObj.innerText = content
            father.appendChild(pObj)
            if(content == this.options.pageInfo.pageNum) pObj.style.background = 'pink'
    }
</script>


<script>
    // 创建对象 展示效果

    let page1 = new Page('.page1', {
        pageTag: {
            first: '首页',
            prev: '上一页',
            list: null,
            next: '下一页',
            last: '末页',
        },
        pageInfo: {
            pageNum: 2,      // 当前页数
            pageSize: 10,    // 每页显示条数  
            totalData: 1000, // 总条数 
            totalPage: 100,  // 总页数 = 向上取整（总条数 / 每页显示条数）
        }
    })

    let page2 = new Page('.page2', {
        pageTag: {
            first: 'first',
            prev: 'prev',
            list: null,
            next: '下一页',
            last: '末页',
        },
        pageInfo: {
            pageNum: 2,     // 当前页数
            pageSize: 10,    // 每页显示条数  
            totalData: 1000, // 总条数 
            totalPage: 100,  // 总页数 = 向上取整（总条数 / 每页显示条数）
        }
    })
</script>